<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="/static/css/photo.css" media="screen" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/static/css/swiper.min.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <style type="text/css">
        .swiper-container{
          --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
          --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
          --swiper-navigation-size: 30px;/* 设置按钮大小 */
        }
    </style>
    <script src="/static/js/swiper.min.js"></script>
</head>

<body>
    <div class="nav">
        <div class="logo"><img src="/data/images/logo_lit.png" width="94" height="35" /></div>
        <div class="navList js_crumb" id="mbx">
            <a href="/">首页</a>
            &nbsp;>&nbsp;<a href="/">元数据</a>
            &nbsp;>&nbsp;<a href="/edataclass.html?classid=245">图谱数据</a>
            <!--  &nbsp;>&nbsp;<a href="/edata/05/maps/">腐蚀图谱</a>&nbsp;&nbsp; -->
        </div>
        <div class="clear"></div>
    </div>
    <div style="width: 950px; margin: 10px auto 0;"></div>

    <div class="photoMHD">
        <div class="titleM">
            <div class="titImg">
                <a href="/edataclass.html?classid=245" target="_blank"><img src="/data/images/tuji.jpg" /></a>
            </div>
            <div class="clear"></div>
        </div>
        <div class="photoNews2">
            <div id="wrap">
                <div class="pic">
                    <div class="eTitle">
                        <h1><span id="txtTitle">涂镀层试样西双版纳大气环境8年腐蚀图谱</span><span id="total">(<spanclass="cC00">
                                    1</span>/11)</span></h1>
                    </div>
                    <!-- <div class=eControl>
                        test
                    </div> -->
                    <div id="eFramePic">
                        <div id="efpBigPic">
                            <div class="d_BigPic">
                                <img src="" id="BigPic" alt="" data-i="" onclick="nextPic(this);">
                            </div>
                            <div id="endSelect" style="display: none;">
                                <div id="endSelClose"></div>
                                <div class="bg"></div>
                                <div class="E_Cont">
                                    <p>您已经浏览完所有图片</p>
                                    <p>
                                        <a id="rePlayBut" href="javascript:select(0)"></a>
                                        <a id="nextPicsBut" href=""></a>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div id="efpTxt">
                            <div class="others">
                                发布时间:2017-10-27 09:56:00 | 浏览<span class="cC00" id="commAObjNum"></span>次
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div id=efpPicList>
                        <div id="efpPreGroup">
                            <div id="efpPrePic">
                                
                            </div>
                            <div id="efpPreTxt"> </div>
                        </div>

                        <div id="efpListLeftArr" onmouseover="this.className='selected'" onmouseout="this.className=''"
                            class=""></div>

                        <div class="swiper-container efpPicListCont" >
                            <div class="swiper-wrapper" id="swiperList">
                                <!-- <div class="swiper-slide picOn">slider1</div>
                                <div class="swiper-slide pic">slider2</div>
                                <div class="swiper-slide pic">slider3</div>
                                <div class="swiper-slide pic">slider4</div>
                                <div class="swiper-slide pic">slider5</div>
                                <div class="swiper-slide pic">slider6</div>
                                <div class="swiper-slide pic">slider7</div>-->
                            </div>
                        </div>

                        <div id="efpListRightArr" onmouseover="this.className='selected'" onmouseout="this.className=''"
                            class=""></div>

                        <div id="efpNextGroup">
                            <div id="efpNextPic" onmouseover="this.className='selected'" onmouseout="this.className=''"
                                class="">
                                
                            </div>
                            <div id="efpPreTxt"> </div>
                        </div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </div>
    <div class="space10"></div>
    <div style="width: 1000px; margin: 0 auto;">
        <div id="editor_name" style="display:none;"></div>
        <div class="past">
            <h2 class="LightGrey03 fz14"><b><a href="" target="_blank">腐蚀图谱</a></b>
            </h2>
            <div class="passitem">
                <ul id="photoList">

                </ul>
            </div>
            <div class="more" id="more"></a>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        版权所有：国家材料环境腐蚀平台 京ICP备13025191号 京公网安备11010802015897号
    </div>
    <!-- <script type="text/javascript" src="/static/js/edataclass.js"></script> -->
    <script type="text/javascript" src="/static/js/myfunc.js?123"></script>

    <script language=javascript type="text/javascript">
        // 获取url上的 classid & page & q
        var id = 0;
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == "id") {
                id = parseInt(pair[1]);
            }
        }

        var mySwiper = new Swiper('.swiper-container', {
            autoplay: false, //可选选项，自动滑动
            init: false,
            navigation: {
                prevEl: '#efpListLeftArr',
                nextEl: '#efpListRightArr',
            },
            slidesPerView : 5,
        });

        $.get("/ajax/edata/getphoto", {
            'id': id
        }, function (data) {
            if (data.success == true) {
                // console.log(data.data);
                var photoList = data.data.photoList;
                var photoData = data.data.photoData;
                var classData = data.data.classData;
                var nextPrev = data.data.nextPrev;

                var mbx_str = '&nbsp;>&nbsp;<a href="/datalist.html?classid=' + classData.id + '">' + classData
                    .classname + '</a>';
                $("#mbx").append(mbx_str);

                var more_str = '<a href="/datalist.html?classid=' + classData.id +
                    '" target="_blank" style="padding-bottom:0px">更多&gt;&gt;';
                $("#more").append(more_str);
                var photoList_str = "";
                photoList.list.forEach(element => {
                    photoList_str += '<li><a href="/photo.html?id='+element.id+'"><img src="/data' + element.titlepic +
                        '" width="120" height="76" alt="" /></a>';
                    photoList_str += '<h3><a href="/photo.html?id='+element.id+'">' + element.title + '</a></h3>';
                    photoList_str += '<p>' + formatDateYMD(element.newstime) + '</p></li>';
                });
                $("#photoList").append(photoList_str);

                var pre_str = "";
                if (nextPrev.dataPrev==null) {
                    pre_str += '<a href="javascript:void(0);" title="没有图集了"><img src="/data/images/defaultpic.gif" width="90" height="65"></a><div id="efpPreTxt"><a href="" title="">没有图集了</a>';
                } else {
                    pre_str += '<a href="/photo.html?id='+nextPrev.dataPrev.id+'" title="'+nextPrev.dataPrev.title+'">';
                    pre_str += '<img src="/data'+nextPrev.dataPrev.titlepic+'" width="90" height="65"></a>';
                    pre_str += '<div id="efpPreTxt"><a href="/photo.html?id='+nextPrev.dataPrev.id+'" title="'+nextPrev.dataPrev.title+'">上一图集</a></div>';
                }
                $("#efpPrePic").append(pre_str);
                
                var next_str = "";
                if (nextPrev.dataNext==null) {
                    next_str += '<a href="javascript:void(0);" title="没有图集了"><img src="/data/images/defaultpic.gif" width="90" height="65"></a><div id="efpPreTxt"><a href="javascript:void(0);" title="">没有图集了</a>';
                    $("#nextPicsBut").attr("href", "javascript:void(0);");
                } else {
                    $("#nextPicsBut").attr("href", "/photo.html?id="+nextPrev.dataNext.id);
                    next_str += '<a href="/photo.html?id='+nextPrev.dataNext.id+'" title="'+nextPrev.dataNext.title+'">';
                    next_str += '<img src="/data'+nextPrev.dataNext.titlepic+'" width="90" height="65"></a>';
                    next_str += '<div id="efpPreTxt"><a href="/photo.html?id='+nextPrev.dataNext.id+'" title="'+nextPrev.dataNext.title+'">下一图集</a></div>';
                }
                $("#efpNextPic").append(next_str);

                var morePic = photoData.morepic;
                // console.log(morePic);
                var pictureList = morePic.split(/\r\n|[\r\n]/);
                var pBifList = new Array();
                swiperList_str = "";
                for (let i = 0; i < pictureList.length; i++) {
                    const picture = pictureList[i]; 
                    
                    let picInfo = picture.split("::::::");
                    // pList.push(picInfo);
                    // console.log(picInfo[0]);
                    if (i==0) {
                        $("#BigPic").attr("src", "/data"+picInfo[1]);
                        $("#BigPic").data("i", 0);
                        swiperList_str += '<div class="swiper-slide" style="width:109px;"><a href="javascript:select(0);" id="img_0" class="picOn"><img src="/data'+picInfo[0]+'" alt="" oncontextmenu="event.returnValue=false;return false;" width="90" height="77"></a></div>';
                    } else {
                        swiperList_str += '<div class="swiper-slide" style="width:109px;"><a href="javascript:select('+i+');" id="img_'+i+'" class="pic"><img src="/data'+picInfo[0]+'" alt="" oncontextmenu="event.returnValue=false;return false;" width="90" height="77"></a></div>';
                    }
                    pBifList[i]=picInfo[1];
                }
                window.localStorage.setItem("pBifList_"+id, JSON.stringify(pBifList));
                $("#swiperList").append(swiperList_str);
                mySwiper.init();
            }
        }, 'json');
    
        function select(i){
            var pBifList = JSON.parse(window.localStorage.getItem("pBifList_"+id));
            // console.log(i);
            // console.log(pBifList.length);
            // console.log(pBifList.length-1);
            if (i>pBifList.length-1) {
                $("#endSelect").css("display", "block");
            } else {
                $("#endSelect").css("display", "none");
                mySwiper.slideTo(i, 1000, false);

                $("#BigPic").attr("src", "/data"+pBifList[i]);
                $("#BigPic").data("i", i);
                $(".swiper-slide a").attr("class","pic");
                // console.log($("#img_"+i));
                $("#img_"+i).attr("class", "picOn");
            }
        }

        function nextPic(obj) {
            var i = $(obj).data("i");
            select(i+1);
        }
    </script>



</body>

</html>